<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


  <title>日志管理</title>

  <!-- Custom fonts for this template-->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

  <!-- Custom styles for this template-->
  <link href="css/sb-admin-2.min.css" rel="stylesheet">

</head>

<body id="page-top">

  <!-- Page Wrapper -->
  <div id="wrapper">

    <!-- Sidebar -->
    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
      <!-- Sidebar - Brand -->
      <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
        <div class="sidebar-brand-icon rotate-n-15">
          <i class="fas fa-laugh-wink"></i>
        </div>
        <div class="sidebar-brand-text mx-3">蓝天企业管理</div>
      </a>
      <!-- Divider -->
      <hr class="sidebar-divider my-0">
      <!-- Nav Item - 首页 -->
      <li class="nav-item">
        <a class="nav-link" href="index.html">
          <i class="fas fa-fw fa-tachometer-alt"></i>
          <span>首页</span></a>
      </li>
<!--	  &lt;!&ndash; Nav Item - 员工个人信息管理 &ndash;&gt;-->
<!--	  <li class="nav-item">-->
<!--	    <a class="nav-link" href="information.html">-->
<!--	      <i class="fas fa-fw fa-tachometer-alt"></i>-->
<!--	      <span>员工个人信息管理</span></a>-->
<!--	  </li>-->
	  <!-- Nav Item - 部门管理 -->
	  <li class="nav-item">
	    <a class="nav-link" href="dept.html">
	      <i class="fas fa-fw fa-tachometer-alt"></i>
	      <span>部门管理</span></a>
	  </li>
	  <!-- Nav Item - 菜单管理 -->
	  <li class="nav-item">
	    <a class="nav-link" href="menu.html">
	      <i class="fas fa-fw fa-tachometer-alt"></i>
	      <span>菜单管理</span></a>
	  </li> 
	  		<!-- Nav Item - 角色管理 -->
	  		<li class="nav-item">
	  		  <a class="nav-link" href="role.html">
	  		    <i class="fas fa-fw fa-tachometer-alt"></i>
	  		    <span>角色管理</span></a>
	  		</li>   
	  		<!-- Nav Item - 用户管理 -->
	  		<li class="nav-item">
	  		  <a class="nav-link" href="user.html">
	  		    <i class="fas fa-fw fa-tachometer-alt"></i>
	  		    <span>用户管理</span></a>
	  		</li>   
	  		<!-- Nav Item - 公告管理 -->
	  		<li class="nav-item">
	  		  <a class="nav-link" href="notice.html">
	  		    <i class="fas fa-fw fa-tachometer-alt"></i>
	  		    <span>公告管理</span></a>
	  		</li>
		<!-- Nav Item - 日志管理 -->
		<li class="nav-item">
			<a class="nav-link" href="notice.html">
				<i class="fas fa-fw fa-tachometer-alt"></i>
				<span>日志管理</span></a>
		</li>
		<!-- Nav Item - Pages Collapse Menu -->
		<li class="nav-item">
			<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
				<i class="fas fa-fw fa-folder"></i>
				<span>审批管理</span>
			</a>
			<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
				<div class="bg-white py-2 collapse-inner rounded">
					<div class="collapse-divider"></div>
					<h6 class="collapse-header">处理:</h6>
					<a class="collapse-item" href="approval.html">已上交</a>
					<a class="collapse-item" href="approval.html">待处理</a>
					<a class="collapse-item" href="approval.html">已处理</a>
					<a class="collapse-item" href="approval.html">我处理的</a>

				</div>
			</div>
		</li>

      <!-- Divider -->
      <hr class="sidebar-divider d-none d-md-block">
      <!-- Sidebar Toggler (Sidebar) -->
      <div class="text-center d-none d-md-inline">
        <button class="rounded-circle border-0" id="sidebarToggle"></button>
      </div>
    </ul>
    <!-- End of Sidebar -->
	
    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">
      <!-- Main Content -->
      <div id="content">
        <!-- Topbar -->
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
          <!-- Topbar Navbar -->
          <ul class="navbar-nav ml-auto">
            <!-- Nav Item - User Information -->
			  <li class="nav-item dropdown no-arrow">
				  <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					  <span class="mr-2 d-none d-lg-inline text-gray-600 small">蓝天企业管理系统</span>
					  <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
				  </a>
				  <!-- Dropdown - User Information -->
				  <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">


					  <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
						  <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
						  退出
					  </a>
				  </div>
			  </li>
          </ul>
        </nav>
        <!-- End of Topbar -->
        <!-- Begin Page Content -->
        <div class="container-fluid">
          <!-- Page Heading -->
          <h1 class="h3 mb-4 text-gray-800">日志管理</h1>
        </div>
		<!-- DataTales Example -->
		<div class="card shadow mb-4">
		  <div class="card-header py-3">
		    <h6 class="m-0 font-weight-bold text-primary">日志信息管理表</h6>
		  </div>
		  <div>
			  <form id="queryForm" style="display: inline">
				  <input type="text" id="selectContent" placeholder="请输入信息">
				  <input type="button" class="btn btn-primary btn-sm" value="查询" onclick="doQueryinformation()">
			  </form>
		  </div>
		  <div class="card-body">
		    <div class="table-responsive">
		      <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
		        <thead>
		          <tr>
		            <th>序号</th>
		            <th>用户名</th>
					<th>操作</th>
		            <th>方法</th>
		            <th>创建时间</th>
		            <th>创建者</th>
		            <th>操作</th>
		          </tr>
		        </thead>
		        <tbody>
		          <tr>
					  <td colspan="7">数据正在加载</td>
		          </tr>
		        </tbody>
		      </table>
			  <!-- pagn -->
			  <div class="pagination">
				  <button class="pre">上一页</button>
				  <button class="percent">1/1</button>
				  <button class="next">下一页</button>
				  <form  id="pageForm">
					  <input type="text" name="pageCurrent" />
					  <input type="button" value="跳转" class="jump" />
				  </form>
			  </div>
		    </div>
		  </div>
		</div>
        <!-- /.container-fluid -->
      </div>
      <!-- End of Main Content -->
      <!-- Footer -->
      <footer class="sticky-footer bg-white">
        <div class="container my-auto">
          <div class="copyright text-center my-auto">
            <span>蓝天企业管理系统，为企业提供最贴心的服务.<a target="_blank"></a></span>
          </div>
        </div>
      </footer>
      <!-- End of Footer -->
    </div>
    <!-- End of Content Wrapper -->
  </div>
  <!-- End of Page Wrapper -->

  <!-- Logout Modal-->
  <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog" role="document">
		  <div class="modal-content">
			  <div class="modal-header">
				  <h5 class="modal-title" id="exampleModalLabel">你确定要退出吗</h5>
				  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
					  <span aria-hidden="true">×</span>
				  </button>
			  </div>
			  <div class="modal-body">如果你确定退出该系统，请点击退出</div>
			  <div class="modal-footer">
				  <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
				  <a class="btn btn-primary" href="login.html">Logout</a>
			  </div>
		  </div>
	  </div>
  </div>

  <!-- Scroll to Top Button-->
  <a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
  </a>
  <!-- Bootstrap core JavaScript-->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- Core plugin JavaScript-->
  <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
  <!-- Custom scripts for all pages-->
  <script src="js/sb-admin-2.min.js"></script>
  
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
	$(function(){
		doGetSelect();
		//注册点击事件
		$(".pagination").on("click",".pre,.next,.jump",doJumpToPage);
		//模态框
		$('#identifier').modal(options);
	});
	//1.查询信息
	function doGetSelect(){
		let pageCurrent=localStorage.getItem("pageCurrent");
		if(pageCurrent==''||pageCurrent=="NaN")pageCurrent=1;
		let params={pageCurrent:pageCurrent};
		//条件查询
		let selectContent=$("#queryForm input[name=selectContent]").val();
		// let selectContent=$("#selectContent");
		params.operation=selectContent;
		//请求url
		let url="http://localhost/log/";
		//ajax函数向服务端发起异步请求
		$.ajax({//服务端没有抛出异常到客户端时执行此函数，result为服务端响应的结果
			url:"http://localhost/log/",
			data:params,
			success(result){
				doHandleQueryResponseResult(result);
		}
		})
	}
	//1.1 处理查询结果
	function doHandleQueryResponseResult(result){
		if(result.state==1){
			doHandleQueryOk(result);
		}else{
			doHandleQueryError();
		}
	}
	//1.1.1 处理错误的查询结果
	function doHandleQueryError(){
		//更新tbody内容
		let tBody=$("table>tbody");
		let len=$("table>thead>tr>th").length;
		let tr=`<tr><td colspan="${len}">没有找到对应记录</td></tr>`
		tBody.html(tr);
		//刷新页码值
		$(".percent").html("0/0");
	}
	//1.1.2 处理正确的查询结果
	function doHandleQueryOk(result){
		//设置tbody中的内容
		let records=result.data.list;
		doSetTableBodyRows(records);
		//设置分页信息(初始化分页数据)
		if(records.length>0){
			doSetPagination(result);
			}
	}
	//1.1.2.1 初始化分页信息
	function doSetPagination(result){
		//初始化页面上的分页数据
		let pageCurrent=result.data.pageNum;//当前页码值
		let pageCount=result.data.pages;//总页数
		$(".percent").html(pageCurrent+"/"+pageCount);
		//将当前页码值存储到浏览器的localStorage对象中，便于其它方法后续应用
		localStorage.setItem("pageCurrent",pageCurrent);
		localStorage.setItem("pageCount",pageCount);
	}
	//1.1.2.2 设置tbody的信息
	function doSetTableBodyRows(records){
		//获取tbody对象，并清空原有内容
		let tBody=$("tbody");//获取tbody对象
		tBody.empty();//清空tbody内容
		//迭代records中的内容，并追加到tbody中
		if(records.length==0){
			doHandleQueryError();
			return;
		}
		//forEach为js中的原生数组函数，item为数组中的一个元素，i为元素下表
		records.forEach((item,i)=>tBody.append(doCreateRow(item,i)));
	}
	//1.1.2.2.1 创建tr对象并填写每一列的内容
	function doCreateRow(item,i){
		return `<tr>
		<td>${i+1}</td>
		<td>${item.menuId}</td>
		<td>${item.operation}</td>
		<td>${item.method}</td>
		<td>${item.createdTime}</td>
		<td>${item.createdUser}</td>
		<td>
		<button class="btn btn-danger btn-xs" onclick="doDeleteById(${item.id})">delete</button>
		<td>
		</tr>`
	}
	//2.根据ID删除信息
	function doDeleteById(id){
		//请求url
		let url=`http://localhost/log/${id}`;
		//发送异步请求
		$.ajax({
			method:"delete",
			url:url,
			success(result){
				doHandleDeleteResponseResult(result);
			}
			
		});
	}
	//2.1 处理删除结果
	function doHandleDeleteResponseResult(result){
		if(result.state==1){
			doHandleDeleteOk(result.message);
		}else{
			alert(result.message);
		}
	}
	//2.1.1 处理正确的删除结果
	function doHandleDeleteOk(msg){
		//给出提示信息
		alert(msg);
		//设置当前页码
		let rows=$("table>tbody>tr").length;
		let pageCurrent=parseInt(localStorage.getItem("pageCurrent"));
		let pageCount=parseInt(localStorage.getItem("pageCount"));
		if(pageCurrent>1&&pageCurrent==pageCount&&rows==1){
			pageCurrent--;
			localStorage.setItem("pageCurrent",pageCurrent);
		}
		//刷新查询
		doGetSelect();
	}
	//3.根据ID查询信息
	function doFindById(id){
		//基于id查询信息
		let url=`http://localhost/log/${id}`;
		$.ajax({
			url:url,
			success(result){
				if(result.state==1){
					//初始化表单信息
					doInitEditForm(result);
				}else{
					alert("记录不存在");
				}
			}
		})
	}
	//3.1初始化表单
	function doInitEditForm(result){
		$("#id").val(result.data.id);
		$("#menuId").val(result.data.menuId);
		$("#operationId").val(result.data.operation);
		$("#methodId").val(result.data.method);
		$("#createdTimeId").val(result.data.createdTime);
		$("#createdUserId").val(result.data.createdUser);
	}
	//4.点击查询按钮时，基于条件查询信息
	function doQueryinformation(){
		//初始化页面
		localStorage.setItem("pageCurrent",1);
		//基于条件进行查询
		doGetSelect();
	}
    //5.基于分页按钮点击事件，进行分页查询
    function doJumpToPage(){
        //1.获取被点击对象的class属性值.
        //$(this)表示被点击的对象
        //prop(属性名[,属性值])为jquery中用于操作属性值的一函数
        let cls=$(this).prop("class");
        //2.基于被点击对象的class属性值修改当前页码值
        //2.1获取当前页码值，总页数
        let pageCurrent=parseInt(localStorage.getItem("pageCurrent"));//当前页码值
        let pageCount=parseInt(localStorage.getItem("pageCount"));//总页数
        //2.2修改当前页码值
        if(cls=="pre"&&pageCurrent>1){
            pageCurrent--;
        }else if(cls=="next"&&pageCurrent<pageCount){
            pageCurrent++;
        }else if(cls=="jump"){
            //获取form表单中元素为input，名字为pageCurrent的值
            let pageStr=$("#pageForm input[name=pageCurrent]").val();
            let pageC=parseInt(pageStr);
            if(pageC<1 || pageC>pageCount){
                alert("页码值不合法");
                $("pageForm input[name=pageCurrent]").val("");//回到初始状态
                return;
            }
            pageCurrent=pageC;
            $("pageForm input[name=pageCurrent]").val("");//回到初始状态
        }else{
            //假如已经是第一页了，你还点上一页，则什么也不做
            //假如已经是最后一页了，你还点下一页，则什么不做
            return;
        }
        console.log("pageCurrent",pageCurrent)
        //将修改了以后的当前页码值，存储起来
        localStorage.setItem("pageCurrent",pageCurrent);
        //3.基于新的页码值重新执行查询
        doGetSelect();
    }


</script>
</body>
</html>
